<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>SocketIO Client</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/app.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="main-page">
    <div class="col-md-3 part-page">
        <div class="user-box">
            <div class="user-part">
                <img src="img/head-icon.png" class="image-circle head-icon" alt=""/>
            </div>
            <div class="user-part user-ipart-info">
                <div>用户ID:<span id="userId">86888</span></div>
                <div id="onlineState">
                    <span class="label label-default">离线</span>
                </div>
            </div>
        </div>

        <div class="server-config">
            <div class="form-group">
                <label for="ip" class="control-label">IP</label>
                <input class="form-control" id="ip"/>
            </div>
            <div class="form-group">
                <label for="port" class="control-label">端口</label>
                <input class="form-control" id="port"/>
            </div>
            <div class="form-group">
                <label for="namespace" class="control-label">namespace</label>
                <input class="form-control" id="namespace" value="/websocket"/>
            </div>
            <div class="form-group">
                <label for="room" class="control-label">room</label>
                <input class="form-control" id="room" value="def_pub_room"/>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-danger" id="connect">连接</button>
            </div>
        </div>
    </div>

    <div class="col-md-9 part-page">
        <div class="panel panel-default" style="height: 100%">
            <div class="panel-heading">消息记录</div>
            <div class="panel-body" style="height:calc(100% - 60px)">
                <div class="well" id="msg-box"></div>
                <div class="col-lg">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="发送消息" id="message"/>
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" id="send">发送</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    $(function () {
        var socket = null
        var userId = ''

        init()

        $('#connect').bind('click',function () {
            var namespace = $('#namespace').val()
            namespace = ""

            var port = $("#port").val()
            var url = "http://127.0.0.1:" + port + namespace + '?room=' + userId + '&userId=' + userId
            socket = io.connect(url, {
                'reconnection delay': 2000,
                'force new connection':true
            })
            socketInit(socket)
        })

        $('#send').bind('click', function () {
            send()
        })

        function init() {
            userId = 'U' + Math.ceil(Math.random() * 10000)
            $('#userId').html(userId)
            var host = window.location.host
            var ip = host.split(':')[0]
            $('#ip').val(ip)
            $('#port').val('90')
        }

        function socketInit(socket) {
            // 监听服务器连接事件
            socket.on('connect', function () {
                $('#msg-box').html(
                    $('#msg-box').html() + '<br/> [系统消息]: 连接服务成功'
                )

                $('#onlineState').html(
                    '<span class="label label-success">在线</span>'
                )
            })

            // 监听服务器关闭服务事件
            socket.on('disconnect', function () {
                $('#msg-box').html(
                    $('#msg-box').html() + '<br/> [系统消息]: 与服务器断开连接'
                )

                $('#onlineState').html(
                    '<span class="label label-default">离线</span>'
                )
            })

            // 监听服务器关闭服务事件
            socket.on('msg_event', function (data) {
                $('#msg-box').html(
                    $('#msg-box').html() + '<br/> [收到消息]: ' + data
                )
            })
        }
    function send() {
            if(socket != null) {
                console.log("发送消息")
                var message = document.getElementById('message').value
                var title = 'message'
                var obj = {message : message, title: title}
                var str = JSON.stringify(obj)
                socket.emit('msg_event', str)
            } else {
                alert('未成服务器连接')
            }
        }
    })
</script>
</html>